
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>

    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <style type="text/css">


    </style>
</head>

<body>

<div id="wrapper">

 <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>



    <div id="content" class="xgrid">

        <div class="x12">

            <h2>
                销账汇总报表
            </h2>
            <div id="app">
                <div class="searchDiv">
                    <div>
                        是否交票 <select>
                        <option>已交票</option>
                        <option>未交票</option>
                        <option>所有</option>
                    </select>

                        销账情况 <select>
                        <option>部分或完全销账</option>
                        <option>完全销账</option>
                        <option>尚未销账</option>
                        <option>所有</option>
                    </select>

                        发票类型 <select>
                        <option>所有</option>
                        <option>普通发票</option>
                        <option>增值税发票</option>
                    </select>

                        <button class="btn btn-small btn-icon btn-find" v-on:click="query"><span></span>查询</button>
                    </div>
                    <div>
                        <div style="float:left;width:298px;">
                            发票号码 <span class="between">
							<input id="t_invoice1"/>
							<input type="checkbox" id="ck_invoice_between" class="checkbox"
                                   onclick="$('#t_invoice2').toggle();"/>
							<label for="ck_invoice_between">至</label>
							<input id="t_invoice2" class="hide"/>
						</span>
                        </div>

                        <div style="float:left;width:298px;">
                            收费日期 <span class="between">
							<input id="t_paydate1" onClick="WdatePicker();" value=""/>
							<input type="checkbox" id="ck_paydate_between" class="checkbox"
                                   onclick="$('#t_paydate2').toggle();"/>
							<label for="ck_paydate_between">至</label>
							<input id="t_paydate2" onClick="WdatePicker();" class="hide"/>
						</span>
                        </div>

                        <div style="float:left;width:298px;">
                            销账日期 <span class="between">
							<input id="t_xzdate1" onClick="WdatePicker();" value=""/>
							<input type="checkbox" id="ck_xzdate_between" class="checkbox"
                                   onclick="$('#t_xzdate2').toggle();"/>
							<label for="ck_xzdate_between">至</label>
							<input id="t_xzdate2" onClick="WdatePicker();" class="hide"/>
						</span>
                        </div>
                    </div>
                    <br/><br/>
                </div>
                <br/>

                <div class="reportTitle">
                    销账汇总报表
                </div>

                <table class="report">
                    <tbody>
                    <tr>
                        <td align="center" width="20%">总交费金额</td>
                        <td align="center" width="20%">总已用金额</td>
                        <td align="center" width="20%">总剩余金额</td>
                        <td align="center" width="20%">总销账水量</td>
                        <td align="center" width="20%">总销账金额</td>
                    </tr>
                    <tr>
                        <td align="right">{{list.ZJFJE}} 元</td>
                        <td align="right">{{list.ZYYJE}} 元</td>
                        <td align="right">{{list.ZSYJE}} 元</td>
                        <td align="right">{{list.ZXZSL}} 吨</td>
                        <td align="right">{{list.ZXZJE}}元</td>
                    </tr>
                    <tr>
                        <td colspan="5" height="40">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">生活用水量</td>
                        <td align="right">{{list.SHYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">生活用水销账金额</td>
                        <td align="right">{{list.SHYSXZJE}} 元</td>
                    </tr>
                    <tr>
                        <td align="center">商业用水量</td>
                        <td align="right">{{list.SYYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">商业用水销账金额</td>
                        <td align="right">{{list.SYYSXZJE}}元</td>
                    </tr>
                    <tr>
                        <td align="center">工业用水量</td>
                        <td align="right">{{list.GYYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">工业用水销账金额</td>
                        <td align="right">{{list.GYYSXZJE}} 元</td>
                    </tr>
                    <tr>
                        <td align="center">行政用水量</td>
                        <td align="right">{{list.XZYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">行政用水销账金额</td>
                        <td align="right">{{list.XZYSXZJE}} 元</td>
                    </tr>
                    <tr>
                        <td align="center">军区用水量</td>
                        <td align="right">{{list.JQYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">军区用水销账金额</td>
                        <td align="right">{{list.JQYSXZJE
                            }} 元
                        </td>
                    </tr>
                    <tr>
                        <td align="center">特种用水量</td>
                        <td align="right">{{list.TZYSL}} 吨</td>
                        <td>&nbsp;</td>
                        <td align="center">特种用水销账金额</td>
                        <td align="right">{{list.TZYSXZJE}} 元</td>
                    </tr>
                    <tr>
                        <td colspan="5" height="40">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">居民生活垃圾处理费销账金额</td>
                        <td align="right">{{list.JMSFLJCLFXZJE}} 元</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">污水处理费销账金额</td>
                        <td align="right">{{list.WSCLFXZJE}} 元</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">大自然水资源费销账金额</td>
                        <td align="right">{{list.DZRSZYFXZJE}} 元</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div> <!-- .x12 -->

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: {
                ZJFJE: '2586',
                ZYYJE: '1582',
                ZSYJE: '1004',
                ZXZSL: '900',
                ZXZJE: '1582',
                SHYSL: '100',
                SYYSL: '100',
                GYYSL: '100',
                XZYSL: '100',
                JQYSL: '100',
                TZYSL: '100',
                SHYSXZJE: '169',
                SYYSXZJE: '241',
                GYYSXZJE: '147',
                XZYSXZJE: '134',
                JQYSXZJE: '112',
                TZYSXZJE: '677',
                JMSFLJCLFXZJE: '20',
                WSCLFXZJE: '80',
                DZRSZYFXZJE: '2',
            }
        },
        methods: {
            query: function () {
                this.list.ZJFJE = this.list.ZJFJE - 9;
                this.list.ZYYJE = this.list.ZYYJE - 8;
                this.list.ZSYJE = this.list.ZSYJE - 7;
                this.list.ZXZSL = this.list.ZXZSL - 6;
                this.list.ZXZJE = this.list.ZXZJE - 5;
                this.list.SHYSL = this.list.SHYSL - 4;
                this.list.ZYYJE = this.list.ZYYJE - 3;
                this.list.ZSYJE = this.list.ZSYJE - 2;
                this.list.ZXZSL = this.list.ZXZSL - 1;
                this.list.ZXZJE = this.list.ZXZJE - 2;
                this.list.SHYSL = this.list.SHYSL - 3;
                this.list.SYYSL = this.list.SYYSL - 4;
                this.list.GYYSL = this.list.GYYSL - 5;
                this.list.XZYSL = this.list.XZYSL - 6;
                this.list.JQYSL = this.list.JQYSL - 7;
                this.list.TZYSL = this.list.TZYSL - 8;
                this.list.SHYSXZJE = this.list.SHYSXZJE - 9;
                this.list.SYYSXZJE = this.list.SYYSXZJE - 8;
                this.list.GYYSXZJE = this.list.GYYSXZJE - 7;
                this.list.XZYSXZJE = this.list.XZYSXZJE - 6;
                this.list.JQYSXZJE = this.list.JQYSXZJE - 5;
                this.list.TZYSXZJE = this.list.TZYSXZJE - 4;
                this.list.JMSFLJCLFXZJE = this.list.JMSFLJCLFXZJE - 0.2;
                this.list.WSCLFXZJE = this.list.WSCLFXZJE - 0.8;
                this.list.DZRSZYFXZJE = this.list.DZRSZYFXZJE - 0.2;
            }
        }
    });
</script>
</body>

</html>